<template>
    <div>
        <Button type="primary" @click="addData">添加用户</Button>
        <Button type="primary" @click="removeData">删除用户</Button>
        <Input v-model="filter.name" placeholder="请输入...">
            <Button slot="append" icon="ios-search" @click="search"></Button>
        </Input>

        <Table border :columns="columns1" :data="list" @on-select="selected"></Table>
        <Page :total="filter.total" show-elevator show-total size="small" show-sizer @on-page-size-change="onPageSizeChange" :page-size="10" @on-change="changePage"></Page>

        <Modal
            v-model="modal1"
            title="用户"
            @on-ok="ok"
            @on-cancel="cancel">
            
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="姓名" prop="name">
                    <Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
                </FormItem>
                <FormItem label="密码" prop="password">
                    <Input type="password" v-model="formValidate.password" placeholder="请输入密码"></Input>
                </FormItem>
                <FormItem label="邮箱" prop="email">
                    <Input v-model="formValidate.email" placeholder="请输入邮箱"></Input>
                </FormItem>
                <FormItem label="性别" prop="gender">
                    <RadioGroup v-model="formValidate.gender">
                        <Radio label="male">男</Radio>
                        <Radio label="female">女</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
    import md5 from 'crypto-js/md5';
    // console.log(md5('aaaaa').toString());
    import Base from '../../common/Base.js';
    export default {
        mixins:[Base],
        data () {
            return {
                module:'users',
                columns1: [
                    {
                        type: 'selection',
                        width: 55,
                        align: 'center',
                    },
                    {
                        type: 'index',
                        width: 55,
                        align: 'center'
                    },
                    {
                        title: '姓名',
                        key: 'name',
                        width:160
                    },
                    {
                        title: '邮箱',
                        key: 'email'
                    },
                    {
                        title: '性别',
                        key: 'gender',
                        width:150
                    },
                    {
                        title: '日期',
                        key: 'date'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 120,
                        render: (h, params) => {
                            return h('div', [
                                // h('Button', {
                                //     props: {
                                //         type: 'text',
                                //         size: 'small'
                                //     },
                                //     on:{
                                //         click:()=>{
                                //             this.show(params.index);
                                //         }
                                //     }
                                // }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on:{
                                        click:()=>{
                                            this.editData(params.row._id)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row._id);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                // data1: [],
                btn:'',
                // total:0,
                // modal1: false,
                formValidate: {
                    name: '',
                    password:'',
                    email: '',
                    gender: '',
                    date: '',
                    desc: ''
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '姓名不能为空', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请填写密码', trigger: 'blur' },
                        { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '邮箱不能为空', trigger: 'blur' },
                        { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
                    ],
                    gender: [
                        { required: true, message: '请选择性别', trigger: 'change' }
                    ]
                }
            }
        },
        methods:{
            //查看按钮，显示对话框
            // show (index) {
            //     this.$Modal.info({
            //         title: '用户信息',
            //         content: `姓名：${this.data1[index].name}<br>年龄：${this.data1[index].age}<br>地址：${this.data1[index].address}`
            //     })
            // },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            ok () {
                this.$Message.info('点击了确定');
            },
            cancel () {
                this.$Message.info('点击了取消');
            },
            selected(secition){
                // console.log(secition)
                this.ids = secition;
                
                // for(var i=0;i<secition.length;i++){
                    // console.log(secition[i]._id)
                    // this.ids = secition[i]._id;
                    // console.log(this.ids)
                // }
                // this.ids = selection;
            }
        }
    }
</script>